<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>在线聊天-KuangStudy</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/index.css}"/>
    <style>
        #table-title tr th{
            border: none;
        }
    </style>
</head>
<body style="background: #f2f2f2;">

    <div th:replace="~{common/header::header(activeUrl='user')}"></div>
    <main role="main" class="container">
        <div class="row card">
            <div class="card-header bg-primary">
<!--                <div>-->
<!--                    <img th:src="${session.loginUser.getAvatar()}" style="width: 30px;height:30px;border-radius: 50%;" alt="">-->
<!--                    <span sec:authentication="name"></span>-->
<!--                </div>-->

                <!--用户名与是否在线-->
                <div class="form-inline" id="username">

                </div>

                <!--与谁聊天-->
                <div id="message">

                </div>
            </div>

            <div class="card-body form-inline" style="padding: 0">
                <div class="col-md-9" style="padding: 0">
                    <div id="chat-body" style="display: none">
                        <!--聊天区-->
                        <div class="card"  id="chat-area" data-spy style="height: 400px">

<!--                            &lt;!&ndash;别人发送的&ndash;&gt;-->
<!--                            <div class="media" style="background-color: white">-->
<!--                                <div class="media-body">-->
<!--                                    <h5 class="mt-0">Media heading</h5>-->
<!--                                    <p>take me to utopia.</p>-->
<!--                                </div>-->
<!--                            </div>-->

                            <!--我发送的-->
<!--                            <div class="media" style="background-color: lightgreen">-->
<!--                                <div class="media-body">-->
<!--                                    <h5 class="mt-0">Media heading</h5>-->
<!--                                    <p>take me to utopia.</p>-->
<!--                                </div>-->
<!--                            </div>-->

                        </div>

                        <!--输入区-->
                        <textarea class="form-control" id="control-text" style="height: 150px; width: 853px"></textarea>
                        <button class="btn btn-primary float-right" id="submit">发送</button>

                    </div>
                </div>

                <div class="col-md-3">
                    <!--在线人名-->
                    <div class="card" style="height: 400px; background-color: #4e555b">
                        <div class="card-header" style="padding-bottom: 0"><p>在线列表</p></div>
                        <ul id="userList">
<!--                            <li class="list-group-item"><a onclick="showChat('liming')">liming</a></li>-->
                        </ul>
                    </div>
                    <!--系统公告-->
                    <div class="card"  style="height: 150px; background-color: #8D8D8D">
                        <div class="card-header" style="padding-bottom: 0"><p>系统通知</p></div>
                        <ul id="broadcastList">
<!--                            <li class="list-group-item">liming 已上线</li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <a class="to-top">返回顶部</a>
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/toTop.js}"></script>
    <script th:src="@{/js/chat.js}"></script>

</body>
</html>